<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <!-- 左侧用户信息卡片 -->
      <el-col :span="6">
        <el-card class="user-card" shadow="hover">
          <div class="user-avatar-container">
            <el-avatar :size="100" :src="userInfo.avatar" />
            <div class="upload-avatar">
          <el-upload
            action="#"
                :auto-upload="false"
            :show-file-list="false"
                :on-change="handleAvatarChange">
                <el-button size="small" type="primary">修改头像</el-button>
          </el-upload>
        </div>
          </div>
        <div class="user-info">
          <h2>{{ userInfo.nickname || userInfo.username }}</h2>
            <p class="user-role">{{ userInfo.roleName || '普通用户' }}</p>
            <p class="user-dept">{{ userInfo.deptName || '未分配部门' }}</p>
        </div>
        <div class="user-stats">
          <div class="stat-item">
              <div class="stat-value">{{ userStats.loginCount }}</div>
            <div class="stat-label">登录次数</div>
          </div>
          <div class="stat-item">
              <div class="stat-value">{{ userStats.lastLoginTime }}</div>
              <div class="stat-label">上次登录</div>
            </div>
          </div>
          <div class="account-status">
            <el-tag :type="userInfo.status === '0' ? 'danger' : 'success'">
              {{ userInfo.status === '0' ? '已禁用' : '正常' }}
            </el-tag>
          </div>
        </el-card>
        
        <el-card class="contact-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>联系方式</span>
            </div>
          </template>
          <div class="contact-item">
            <i class="el-icon-phone"></i>
            <span>{{ userInfo.mobile || '未设置手机号' }}</span>
        </div>
          <div class="contact-item">
            <i class="el-icon-message"></i>
            <span>{{ userInfo.email || '未设置邮箱' }}</span>
      </div>
        </el-card>
      </el-col>
    
      <!-- 右侧详细信息标签页 -->
      <el-col :span="18">
        <el-card shadow="hover">
      <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="basic">
              <el-form :model="userForm" :rules="rules" ref="userFormRef" label-width="100px">
            <el-form-item label="用户名" prop="username">
                  <el-input v-model="userForm.username" disabled />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                  <el-input v-model="userForm.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="userForm.gender">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
                <el-radio label="2">保密</el-radio>
              </el-radio-group>
            </el-form-item>
                <el-form-item label="手机号码" prop="mobile">
                  <el-input v-model="userForm.mobile" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                  <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
                <el-form-item label="个人简介" prop="remark">
              <el-input
                    v-model="userForm.remark"
                type="textarea"
                :rows="4"
                placeholder="请输入个人简介"
              />
            </el-form-item>
            <el-form-item>
                  <el-button type="primary" @click="submitForm">保存更改</el-button>
                  <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
            <el-tab-pane label="安全设置" name="security">
              <el-list>
                <el-list-item>
                  <el-list-item-meta
                    title="账户密码"
                    description="建议您定期更改密码，设置更高强度的密码"
                  >
                    <template #avatar>
                      <el-avatar icon="Lock" />
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="changePassword">修改密码</el-button>
                  </template>
                </el-list-item>
                
                <el-list-item>
                  <el-list-item-meta
                    title="手机绑定"
                    :description="userInfo.mobile ? `已绑定手机号：${userInfo.mobile}` : '未绑定手机号'"
                  >
                    <template #avatar>
                      <el-avatar icon="Iphone" />
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="bindPhone">{{ userInfo.mobile ? '修改' : '绑定' }}</el-button>
                  </template>
                </el-list-item>
                
                <el-list-item>
                  <el-list-item-meta
                    title="邮箱绑定"
                    :description="userInfo.email ? `已绑定邮箱：${userInfo.email}` : '未绑定邮箱'"
                  >
                    <template #avatar>
                      <el-avatar icon="Message" />
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="bindEmail">{{ userInfo.email ? '修改' : '绑定' }}</el-button>
                  </template>
                </el-list-item>
                
                <el-list-item>
                  <el-list-item-meta
                    title="安全日志"
                    description="查看账户安全相关的操作日志"
                  >
                    <template #avatar>
                      <el-avatar icon="Document" />
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="viewSecurityLog">查看</el-button>
                  </template>
                </el-list-item>
              </el-list>
            </el-tab-pane>
            
            <el-tab-pane label="账号绑定" name="binding">
              <el-list>
                <el-list-item>
                  <el-list-item-meta
                    title="微信"
                    :description="thirdParty.wechat ? '已绑定' : '未绑定'"
                  >
                    <template #avatar>
                      <el-avatar style="background-color:#07C160">
                        <i class="fab fa-weixin"></i>
                      </el-avatar>
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="bindThirdParty('wechat')">
                      {{ thirdParty.wechat ? '解绑' : '绑定' }}
                    </el-button>
                  </template>
                </el-list-item>
                
                <el-list-item>
                  <el-list-item-meta
                    title="企业微信"
                    :description="thirdParty.workWechat ? '已绑定' : '未绑定'"
                  >
                    <template #avatar>
                      <el-avatar style="background-color:#2795FF">
                        <i class="fab fa-weixin"></i>
                      </el-avatar>
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="bindThirdParty('workWechat')">
                      {{ thirdParty.workWechat ? '解绑' : '绑定' }}
                    </el-button>
                  </template>
                </el-list-item>
                
                <el-list-item>
                  <el-list-item-meta
                    title="钉钉"
                    :description="thirdParty.dingtalk ? '已绑定' : '未绑定'"
                  >
                    <template #avatar>
                      <el-avatar style="background-color:#1677FF">
                        <i class="fa fa-d"></i>
                      </el-avatar>
                    </template>
                  </el-list-item-meta>
                  <template #extra>
                    <el-button @click="bindThirdParty('dingtalk')">
                      {{ thirdParty.dingtalk ? '解绑' : '绑定' }}
                    </el-button>
                  </template>
                </el-list-item>
              </el-list>
            </el-tab-pane>
            
            <el-tab-pane label="消息通知" name="notification">
              <div class="notification-settings">
                <el-divider content-position="left">通知方式</el-divider>
                <el-space direction="vertical" alignment="flex-start" :size="20" fill style="width: 100%">
                  <el-checkbox-group v-model="notificationSettings.methods">
                    <el-checkbox label="system">系统消息</el-checkbox>
                    <el-checkbox label="email">邮件通知</el-checkbox>
                    <el-checkbox label="sms">短信通知</el-checkbox>
                  </el-checkbox-group>
                </el-space>
                
                <el-divider content-position="left">通知类型</el-divider>
                <el-space direction="vertical" alignment="flex-start" :size="20" fill style="width: 100%">
                  <div class="notification-item" v-for="(item, index) in notificationTypes" :key="index">
                    <span class="notification-name">{{ item.name }}</span>
                    <el-switch
                      v-model="notificationSettings.types[item.key]"
                      active-text="开启"
                      inactive-text="关闭"
                    />
                  </div>
                </el-space>
                
                <div class="action-buttons">
                  <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
                  <el-button @click="resetNotificationSettings">恢复默认</el-button>
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="登录日志" name="loginLog">
              <el-table :data="loginLogs" style="width: 100%">
                <el-table-column prop="logContent" label="操作内容" />
                <el-table-column prop="createTime" label="操作时间" width="180" />
                <el-table-column prop="ipAddress" label="IP地址" width="180" />
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      v-model="passwordDialogVisible"
      width="30%"
    >
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordFormRef" label-width="100px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitPasswordForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 绑定手机号对话框 -->
    <el-dialog :title="userInfo.mobile ? '修改手机号' : '绑定手机号'" v-model="phoneDialog" width="500px" append-to-body>
      <el-form :model="phoneForm" :rules="phoneRules" ref="phoneFormRef" label-width="100px">
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="phoneForm.mobile" placeholder="请输入手机号码" />
            </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="phoneForm.code" placeholder="请输入验证码" style="width: 60%">
            <template #append>
              <el-button :disabled="isSending" @click="sendSmsCode">
                {{ smsText }}
              </el-button>
            </template>
          </el-input>
            </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="phoneDialog = false">取消</el-button>
          <el-button type="primary" @click="submitPhoneBinding">确定</el-button>
        </div>
      </template>
    </el-dialog>
    
    <!-- 绑定邮箱对话框 -->
    <el-dialog :title="userInfo.email ? '修改邮箱' : '绑定邮箱'" v-model="emailDialog" width="500px" append-to-body>
      <el-form :model="emailForm" :rules="emailRules" ref="emailFormRef" label-width="100px">
        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="emailForm.email" placeholder="请输入邮箱地址" />
            </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="emailForm.code" placeholder="请输入验证码" style="width: 60%">
            <template #append>
              <el-button :disabled="isEmailSending" @click="sendEmailCode">
                {{ emailText }}
              </el-button>
            </template>
          </el-input>
            </el-form-item>
          </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="emailDialog = false">取消</el-button>
          <el-button type="primary" @click="submitEmailBinding">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getProfile, updateProfile, uploadAvatar, getUserLogs, updatePassword } from '@/api/profile'
import { ElMessage } from 'element-plus'

export default {
  name: 'UserProfile',
  data() {
    // 验证两次密码是否一致
    const validateConfirmPassword = (rule, value, callback) => {
      if (value !== this.passwordForm.newPassword) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    
    return {
// 当前激活的标签页
      activeTab: 'basic',
      
      // 用户基本信息
      userInfo: {
        userId: '',
  username: 'admin',
  nickname: '管理员',
        deptName: '研发部门',
  roleName: '超级管理员',
  gender: '0',
        mobile: '13800138000',
  email: 'admin@example.com',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        status: '1',
        remark: '系统管理员'
      },
      
      // 用户统计信息
      userStats: {
        loginCount: 168,
        lastLoginTime: '2023-05-15 10:30:45'
      },
      
      // 用户表单
      userForm: {
        username: '',
        nickname: '',
        gender: '0',
        mobile: '',
        email: '',
        remark: ''
      },
      
      // 表单校验规则
      rules: {
  nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      },
      
      // 第三方账号绑定状态
      thirdParty: {
        wechat: false,
        workWechat: true,
        dingtalk: false
      },
      
      // 密码修改相关
      passwordDialogVisible: false,
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      passwordRules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      },
      
      // 手机绑定相关
      phoneDialog: false,
      phoneForm: {
        mobile: '',
        code: ''
      },
      phoneRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
        ]
      },
      isSending: false,
      countdown: 60,
      smsText: '获取验证码',
      
      // 邮箱绑定相关
      emailDialog: false,
      emailForm: {
        email: '',
        code: ''
      },
      emailRules: {
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
        ]
      },
      isEmailSending: false,
      emailCountdown: 60,
      emailText: '获取验证码',
      
      // 通知设置
      notificationSettings: {
        methods: ['system'],
        types: {
          security: true,
          activity: true,
          announcement: true,
          task: true
        }
      },
      notificationTypes: [
        { name: '安全提醒', key: 'security' },
        { name: '活动通知', key: 'activity' },
        { name: '系统公告', key: 'announcement' },
        { name: '任务通知', key: 'task' }
      ],
      
      // 登录日志
      loginLogs: [
        { logId: 101, logContent: '登录系统', ipAddress: '127.0.0.1', createTime: '2023-06-08 10:00:00' },
        { logId: 102, logContent: '修改了个人资料', ipAddress: '127.0.0.1', createTime: '2023-06-08 10:05:00' }
      ],
      total: 2,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.fetchUserProfile();
  },
  methods: {
    // 获取用户信息
    async fetchUserProfile() {
      try {
        // const res = await getProfile()
        // this.userInfo = res.data
        // this.userForm = { ...res.data }
        // 模拟数据
        this.userInfo = {
          "userId": 1,
          "username": "admin",
          "nickname": "系统管理员",
          "sex": "1",
          "avatar": "/profile/avatar/2023/06/01/avatar.jpg",
          "email": "admin@example.com",
          "mobile": "13800138000",
          "deptName": "总公司",
          "roleNames": ["超级管理员"],
          "joinDate": "2023-01-01",
          "lastLoginIp": "127.0.0.1",
          "lastLoginTime": "2023-06-01 10:00:00",
          "status": "1",
          "remark": ""
        }
        this.userForm = { ...this.userInfo }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        ElMessage.error('获取用户信息失败')
      }
    },
    
    // 提交表单
    submitForm() {
      this.$refs.userFormRef.validate(async (valid) => {
        if (valid) {
          try {
            // await updateProfile(this.userForm)
            ElMessage.success('个人资料修改成功')
            // 更新成功后，可以重新获取用户信息
            // await this.fetchUserProfile()
            console.log('表单提交成功', this.userForm)
          } catch (error) {
            console.error('更新个人资料失败:', error)
            ElMessage.error('个人资料修改失败')
          }
        } else {
          ElMessage.error('请检查表单输入')
          return false
        }
      })
    },
    
    // 重置表单
    resetForm() {
      this.$refs.userFormRef.resetFields()
      this.getUserProfile()
    },
    
    // 处理头像上传
    handleAvatarChange(file) {
      const formData = new FormData()
      formData.append('avatarfile', file.raw)
      
      // 模拟上传
      try {
        // await uploadAvatar(formData)
        this.userInfo.avatar = URL.createObjectURL(file.raw)
        ElMessage.success('头像上传成功')
      } catch (error) {
        console.error('头像上传失败:', error)
        ElMessage.error('头像上传失败')
      }
    },
    
    // 修改密码
    changePassword() {
      this.passwordDialogVisible = true
      this.$nextTick(() => {
        this.$refs.passwordFormRef.resetFields()
      })
    },
    
    // 提交密码修改
    submitPasswordForm() {
      this.$refs.passwordFormRef.validate(async (valid) => {
        if (valid) {
          try {
            // await updatePassword({ oldPassword: this.passwordForm.oldPassword, newPassword: this.passwordForm.newPassword })
            ElMessage.success('密码修改成功')
            this.passwordDialogVisible = false
          } catch (error) {
            console.error('密码修改失败:', error)
            ElMessage.error('密码修改失败')
          }
        } else {
          return false
        }
      })
    },
    
    // 绑定手机号
    bindPhone() {
      this.phoneDialog = true
      this.phoneForm = {
        mobile: this.userInfo.mobile || '',
        code: ''
      }
    },
    
    // 发送短信验证码
    sendSmsCode() {
      this.$refs.phoneFormRef.validateField('mobile', (errorMsg) => {
        if (!errorMsg) {
          this.isSending = true
          this.smsText = `${this.countdown}秒后重新获取`
          
          // 倒计时
          const timer = setInterval(() => {
            this.countdown--
            this.smsText = `${this.countdown}秒后重新获取`
            
            if (this.countdown <= 0) {
              clearInterval(timer)
              this.isSending = false
              this.countdown = 60
              this.smsText = '获取验证码'
            }
          }, 1000)
          
          // 在实际项目中，这里应该调用API发送验证码
          this.$message.success('验证码发送成功')
        }
      })
    },
    
    // 提交手机绑定
    submitPhoneBinding() {
      this.$refs.phoneFormRef.validate(valid => {
    if (valid) {
          // 在实际项目中，这里应该调用API绑定手机号
          this.$message.success('手机号绑定成功')
          this.phoneDialog = false
          this.userInfo.mobile = this.phoneForm.mobile
          this.userForm.mobile = this.phoneForm.mobile
        } else {
          return false
        }
      })
    },
    
    // 绑定邮箱
    bindEmail() {
      this.emailDialog = true
      this.emailForm = {
        email: this.userInfo.email || '',
        code: ''
      }
    },
    
    // 发送邮箱验证码
    sendEmailCode() {
      this.$refs.emailFormRef.validateField('email', (errorMsg) => {
        if (!errorMsg) {
          this.isEmailSending = true
          this.emailText = `${this.emailCountdown}秒后重新获取`
          
          // 倒计时
          const timer = setInterval(() => {
            this.emailCountdown--
            this.emailText = `${this.emailCountdown}秒后重新获取`
            
            if (this.emailCountdown <= 0) {
              clearInterval(timer)
              this.isEmailSending = false
              this.emailCountdown = 60
              this.emailText = '获取验证码'
            }
          }, 1000)
          
          // 在实际项目中，这里应该调用API发送验证码
          this.$message.success('验证码发送成功')
        }
      })
    },
    
    // 提交邮箱绑定
    submitEmailBinding() {
      this.$refs.emailFormRef.validate(valid => {
        if (valid) {
          // 在实际项目中，这里应该调用API绑定邮箱
          this.$message.success('邮箱绑定成功')
          this.emailDialog = false
          this.userInfo.email = this.emailForm.email
          this.userForm.email = this.emailForm.email
  } else {
          return false
        }
      })
    },
    
    // 查看安全日志
    viewSecurityLog() {
      this.activeTab = 'loginLog'
      this.fetchUserLogs()
    },
    
    // 获取用户操作日志
    async fetchUserLogs() {
      try {
        // const res = await getUserLogs({ pageNum: 1, pageSize: 10 })
        // this.loginLogs = res.data.list
        
        // 模拟数据
        this.loginLogs = [
          {
            "logId": 101,
            "logContent": "登录系统",
            "ipAddress": "127.0.0.1",
            "createTime": "2023-06-08 10:00:00"
          },
          {
            "logId": 102,
            "logContent": "修改了个人资料",
            "ipAddress": "127.0.0.1",
            "createTime": "2023-06-08 10:05:00"
          }
        ]
      } catch (error) {
        console.error('获取操作日志失败:', error)
        ElMessage.error('获取操作日志失败')
      }
    },
    
    // 绑定第三方账号
    bindThirdParty(type) {
      // 在实际项目中，这里应该进行第三方账号绑定或解绑
      this.thirdParty[type] = !this.thirdParty[type]
      this.$message.success(this.thirdParty[type] ? '账号绑定成功' : '账号已解绑')
    },
    
    // 保存通知设置
    saveNotificationSettings() {
      // 在实际项目中，这里应该调用API保存通知设置
      this.$message.success('通知设置保存成功')
    },
    
    // 重置通知设置
    resetNotificationSettings() {
      this.notificationSettings = {
        methods: ['system'],
        types: {
          security: true,
          activity: true,
          announcement: true,
          task: true
        }
      }
      this.$message.info('已重置为默认设置')
    },
    
    // 分页相关方法
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.fetchUserLogs()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.fetchUserLogs()
    }
  }
}
</script>

<style scoped>
.profile-container {
  padding: 20px;
}

/* 用户卡片样式 */
.user-card {
  margin-bottom: 20px;
}

.user-avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.upload-avatar {
  margin-top: 15px;
}

.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.user-info h2 {
  margin: 10px 0;
  font-size: 20px;
}

.user-role,
.user-dept {
  color: #666;
  margin: 5px 0;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.account-status {
  text-align: center;
}

/* 联系方式卡片 */
.contact-card {
  margin-bottom: 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.contact-item i {
  margin-right: 10px;
  font-size: 16px;
  color: #409EFF;
}

/* 通知设置样式 */
.notification-settings {
  padding: 10px 0;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.notification-item:last-child {
  border-bottom: none;
}

.action-buttons {
  margin-top: 20px;
  text-align: right;
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 